<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.css" rel="stylesheet" media="screen">
        <style>
            .show-grid [class^="span"] {
                padding-top: 10px;
                padding-bottom: 10px;
                background-color: #eee;
                
                background-color: rgba(86,61,124,.15);
                
            }
        </style>
    </head>
    <body>
        
            <div class="navbar">
              <div class="navbar-inner">
                <div class="container">
                  <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </a>
                  <a class="brand" href="#">Title</a>
                  <div class="nav-collapse collapse navbar-responsive-collapse">
                    <ul class="nav">
                      <li class="active"><a href="#">Home</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li class="divider"></li>
                          <li class="nav-header">Nav header</li>
                          <li><a href="#">Separated link</a></li>
                          <li><a href="#">One more separated link</a></li>
                        </ul>
                      </li>
                    </ul>
                    <form class="navbar-search pull-left" action="">
                      <input type="text" class="search-query span2" placeholder="Search">
                    </form>
                    <ul class="nav pull-right">
                      <li><a href="#">Link</a></li>
                      <li class="divider-vertical"></li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Separated link</a></li>
                        </ul>
                      </li>
                    </ul>
                  </div><!-- /.nav-collapse -->
                </div>
              </div><!-- /navbar-inner -->
            </div><!-- /navbar -->
			<div class="container">
			<div class="row-fluid">
            <ul class="thumbnails">
              <li class="span4">
                <div class="thumbnail">
                  <img class="span12" src="http://getbootstrap.com/2.3.2/assets/img/example-sites/kippt.png" alt="">
                  <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p class="hidden-phone">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					<p>
					<input type="text" />
					</p>
                    <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                  </div>
                </div>
              </li>
              <li class="span4">
                <div class="thumbnail">
                  <img class="span12" src="http://getbootstrap.com/2.3.2/assets/img/example-sites/gathercontent.png" alt="">
                  <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p class="hidden-phone">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                  </div>
                </div>
              </li>
              <li class="span4">
                <div class="thumbnail">
                  <img class="span12" src="http://getbootstrap.com/2.3.2/assets/img/example-sites/soundready.png" alt="">
                  <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p class="hidden-phone">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="container">
  <h1>Bootstrap 3 Panels</h1>  
  <div class="panel">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div>
    <p>Panel with List Group</p>
  
    <!-- List group -->
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item">Morbi leo risus</li>
      <li class="list-group-item">Porta ac consectetur ac</li>
      <li class="list-group-item">Vestibulum at eros</li>
    </ul>
  </div>
  <div class="panel panel-primary">
    <div class="panel-heading">Bootstrap 3 - Panel Primary</div>
    Panel content goes here..
  </div>
  <div class="panel panel-success">
    <div class="panel-heading">Heading</div>
    Panel Success
  </div>
  <div class="panel panel-warning">
    <div class="panel-heading">Heading</div>
    Panel Warning
  </div>
  <div class="panel panel-danger">
    <div class="panel-heading">Heading</div>
    Panel Danger
  </div>
  <div class="panel panel-info">
    <div class="panel-heading">Heading</div>
    Panel Info
  </div>
  <hr>
  <a href="http://bootply.com/61518">Edit with Bootply</a>
  <hr>
  
</div>
        
        
        <div class="container" style="max-width: -960px;padding: 0 -15px">
            <div class="row show-grid">
                <div class="span3 col-lg-3 visible-desktop">
                    <div class="bs-sidebar">
                        <ul class="nav bs-sidenav">

                            <li>
                                <a href="#download">Download Bootstrap</a>
                                <ul class="nav">
                                    <li><a href="#download-options">Download options</a></li>
                                    <li><a href="#download-cdn">Bootstrap CDN</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#whats-included">What's included</a>
                            </li>
                            <li>
                                <a href="#template">Basic template</a>
                            </li>
                            <li>
                                <a href="#browsers">Browser support</a>
                            </li>
                            <li>
                                <a href="#license-faqs">License FAQs</a>
                            </li>
                            <li>
                                <a href="#customizing">Customizing Bootstrap</a>
                            </li>

                        </ul>
                    </div>
                </div>
                <div class="span9 col-lg-9 panel">
                   abc

                </div>
            </div>

        </div>
        <h1>Hello, world!...</h1>
        <h2>Hello, world!...</h2>
        <h3>Hello, world!...</h3>
        <h4>Hello, world!...</h4>
        <h5>Hello, world!...</h5>
        <h6>.Hello, world!..</h6>
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>